<template>
  <v-container>
    <div class="pt-5">
      <span class="display-1 font-weight-bold">发现创作者</span>
    </div>
    <div class="pt-9">
      <v-tabs id="app-bar-tabs" background-color="transparent">
        <v-tab class="ml-0 subtitle-1" @click="tuijian">推荐</v-tab>
        <!-- <v-tab class="ml-9 subtitle-1" @click="renqi">人气</v-tab> -->
      </v-tabs>
    </div>
    <v-row class="mb-6 mt-6">
      <v-col cols="12" class="hidden-md-and-up">
        <template>
          <v-card class="mx-auto">
            <v-list>
              <v-list-group>
                <template v-slot:activator>
                  <v-list-item-title>
                    <div>
                      <v-list-item class="py-0">
                        <v-list-item-avatar>
                          <v-img :src="link.icon"></v-img>
                        </v-list-item-avatar>
                        {{ link.text }}
                      </v-list-item>
                    </div>
                  </v-list-item-title>
                </template>
                <v-list-item v-for="(link, i) in links" :key="link.pk">
                  <div style="width:100%;">
                    <v-card class="mt-4" @click="fetchCat(link.text, true, i)">
                      <v-list-item class="py-0">
                        <v-list-item-avatar>
                          <v-img :src="link.icon"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-title
                          v-text="link.text"
                        ></v-list-item-title>
                      </v-list-item>
                    </v-card>
                  </div>
                </v-list-item>
              </v-list-group>
            </v-list>
          </v-card>
        </template>
      </v-col>
      <v-col cols="12" md="3" class="hidden-sm-and-down">
        <div v-for="link in links" :key="link.pk">
          <v-card class=" mt-4" @click="fetchCat(link.text, true)">
            <v-list-item class="py-0">
              <v-list-item-avatar>
                <v-img :src="link.icon"></v-img>
              </v-list-item-avatar>
              {{ link.text }}
            </v-list-item>
          </v-card>
        </div>
      </v-col>
      <v-col cols="12" md="9">
        <div>
          <v-row>
            <v-col
              v-for="article in articles"
              :key="article.pk"
              cols="12"
              md="6"
              class="mt-1"
            >
              <div>
                <v-card
                  height="346"
                  class="mx-auto"
                  @click="fetchDet(article.pk)"
                >
                  <v-img :src="article.fields.cover_image" height="194"></v-img>
                  <v-list-item>
                    <v-list-item-avatar
                      @click="
                        $router.push(`/creater/${article.fields.name[0]}`)
                      "
                    >
                      <v-img
                        class="elevation-6"
                        :src="article.fields.name[1]"
                      ></v-img>
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title class="headline">{{
                        article.fields.title
                      }}</v-list-item-title>
                      <v-list-item-subtitle>{{
                        article.fields.name[0]
                      }}</v-list-item-subtitle>
                    </v-list-item-content>
                    <v-btn color="primary">{{ article.fields.category }}</v-btn>
                  </v-list-item>

                  <v-card-text
                    >{{ replace(article.fields.content.slice(0, 42)) + "..." }}
                  </v-card-text>
                </v-card>
              </div>
            </v-col>
          </v-row>
          <!-- <div>
            <v-btn v-if="articles.length !== 0" color="primary" @click="more"
              >查看更多</v-btn
            >
          </div> -->
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      articles: [],
      page: 1,
      link: {
        text: "所有",
        icon: require("@/assets/bar/all@2x.png"),
      },
      index: "",
      name: "",
      category: false,
      offsetTop: 0,
      no_more: false,
      flag: false,
      links: [
        {
          text: "所有",
          icon: require("@/assets/bar/all@2x.png"),
        },
        {
          text: "绘画",
          icon: require("@/assets/bar/paint.jpg"),
        },
        {
          text: "视频",
          icon: require("@/assets/bar/video.jpg"),
        },
        {
          text: "写作",
          icon: require("@/assets/bar/write.jpg"),
        },
        {
          text: "游戏",
          icon: require("@/assets/bar/game.jpg"),
        },
        {
          text: "音乐",
          icon: require("@/assets/bar/music.jpg"),
        },
        {
          text: "播客",
          icon: require("@/assets/bar/portcast.jpg"),
        },
        {
          text: "摄影",
          icon: require("@/assets/bar/photo.jpg"),
        },
        {
          text: "技术",
          icon: require("@/assets/bar/tech.jpg"),
        },
        {
          text: "Vtuber",
          icon: require("@/assets/bar/Vtuber.jpg"),
        },
        {
          text: "舞蹈",
          icon: require("@/assets/bar/jump.jpg"),
        },
        {
          text: "体育",
          icon: require("@/assets/bar/sport.jpg"),
        },
        {
          text: "旅游",
          icon: require("@/assets/bar/travel.jpg"),
        },
        {
          text: "美食",
          icon: require("@/assets/bar/food.jpg"),
        },
        {
          text: "时尚",
          icon: require("@/assets/bar/beauty.jpg"),
        },
        {
          text: "数码",
          icon: require("@/assets/bar/digital.jpg"),
        },
        {
          text: "动画",
          icon: require("@/assets/bar/animate.jpg"),
        },
        {
          text: "翻译",
          icon: require("@/assets/bar/translate.jpg"),
        },
        {
          text: "其他",
          icon: require("@/assets/bar/other.jpg"),
        },
      ],
    };
  },
  methods: {
    tuijian() {
      console.log("1111");
    },
    renqi() {
      console.log("2222");
    },
    async fetchCat(name, change, i) {
      console.log(name);
      this.name = name;
      if (i) {
        this.index = i;
        this.link = this.links[i];
      }
      this.category = true;
      //有改变
      if (change) {
        this.page = 1;
        this.no_more = false;
        this.flag = false;
        this.$vuetify.goTo(0);
      }
      if (name === "所有") {
        this.category = false;
        this.fetch();
        return;
      }
      try {
        if (this.page === 1) {
          this.articles = [];
        }
        const res = await this.$http.get(
          `article_list_cat/?category=${name}&page=${this.page}`
        );
        if (res.data.error_num === 1) {
          this.no_more = true;
        }
        this.articles = [...this.articles, ...res.data.list];
        this.articles.forEach((art) => {
          art.fields.cover_image = require(art.fields.cover_image);
          art.fields.name[1] = require(art.fields.name[1]);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    replace(str) {
      let con = str.replace(/\s*/g, ""); //去掉空格
      let res = con.replace(/<[^>]+>/g, ""); //去掉所有的html标记
      let res1 = res.replace(/↵/g, ""); //去掉所有的↵符号
      let res2 = res1.replace(/[\r\n]/g, ""); //去掉回车换行
      return res2;
    },
    more() {
      this.page++;
      if (this.category) {
        this.fetchCat(this.name, false, this.index);
      } else {
        this.fetch();
      }
    },
    fetchDet(id) {
      this.$router.push(`/article/${id}`);
    },
    async fetch() {
      try {
        if (this.page === 1) {
          this.articles = [];
        }
        const res = await this.$http.get(`article_list/?page=${this.page}`);
        if (res.data.error_num === 1) {
          this.no_more = true;
        }
        this.articles = [...this.articles, ...res.data.list];
        this.articles.forEach((art) => {
          art.fields.cover_image = require(art.fields.cover_image);
          art.fields.name[1] = require(art.fields.name[1]);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    scrollHandle() {
      // 获取页面页面的滚动高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 获取页面滚动距离顶部的高度,  window.pageYOffse 兼容苹果
      let scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // 获取页面的可视高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      if (scrollTop + clientHeight >= scrollHeight - 20) {
        // 距离底部还有20的时候执行数据加载
        if (this.flag) return;
        this.flag = true;
        if (!this.no_more) {
          console.log("加载数据");
          this.more();
          this.flag = false;
        }
      }
    },
  },
  created() {
    this.fetch();
    window.addEventListener("scroll", this.scrollHandle, true);
    this.$vuetify.goTo(0);
  },
  destroyed() {
    // 页面卸载时移除监听事件
    window.removeEventListener("scroll", this.scrollHandle, true);
    console.log("卸载滚动事件");
  },
  watch: {
    $route() {
      setTimeout(() => {
        let appTabSelect =
          document
            .getElementById("app-bar-tabs")
            .getElementsByClassName("v-tab--active").length == 0;
        if (appTabSelect) {
          document
            .getElementById("app-bar-tabs")
            .getElementsByClassName(
              "v-tabs-slider-wrapper"
            )[0].style.visibility = "hidden";
        } else {
          document
            .getElementById("app-bar-tabs")
            .getElementsByClassName(
              "v-tabs-slider-wrapper"
            )[0].style.visibility = "visible";
        }
      }, 100);
    },
  },
};
</script>

<style lang="scss">
.v-list-group__items {
  height: 200px;
  overflow: auto;
}
</style>
